<template>
  <view class="container">
    <!-- 文化背景图 -->
    <image 
      class="cultural-bg" 
      src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine_bg.png" 
      mode="aspectFill"
    ></image>

    <!-- 登录界面 -->
    <view class="login-card" v-if="!userInfo">
      <image 
        class="horn-decoration" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>
      <image 
        class="horn-decoration right" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>

      <view class="content">
        <view class="title-container">
          <text class="title">掼牛文化传承</text>
          <image 
            class="admin-icon" 
            src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/setting.png"
            @tap="navigateToAdmin"
          ></image>
        </view>
        <view class="input-group">
          <view class="input-item">
            <input
              class="cultural-input"
              type="number"
              placeholder="请输入手机号"
              v-model="mobile"
              maxlength="11"
              @input="validateMobile"
            />
            <image class="icon" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/phone.png"></image>
          </view>

          <view class="input-item">
            <input
              class="cultural-input"
              type="number"
              placeholder="请输入验证码"
              v-model="code"
              maxlength="6"
            />
            <text 
              class="code-btn" 
              :class="{ disabled: !canGetCode }"
              @tap="getSMSCode"
            >
              {{ codeBtnText }}
            </text>
            <image class="icon" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/code.png"></image>
          </view>
        </view>

        <button 
          class="login-btn" 
          :class="{ disabled: !canLogin }"
          @tap="handleLogin"
          :loading="loading"
        >
          <text>{{ loading ? '登录中...' : '立即登录' }}</text>
        </button>
        <view class="registerText"><text>还没有账号？<text @click="register" style="color: #7CBAFF;">点击进行注册</text></text></view>

        <view class="agreement">
          <checkbox-group @change="toggleAgree">
            <checkbox :checked="agreed" color="#8B4513"/>
          </checkbox-group>
          <text class="agreement-text">
            已阅读并同意
            <text class="link" @tap="navToProtocol">《用户协议》</text>
          </text>
        </view>
      </view>
    </view>

    <!-- 用户中心 -->
    <view class="user-center" v-else>
      <image 
        class="horn-decoration" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>
      <image 
        class="horn-decoration right" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>

      <view class="content">
        <!-- 用户信息 -->
        <view class="user-info">
          <image class="avatar" :src="userInfo.avatar || '/static/default_avatar.png'"></image>
          <view class="user-meta">
            <view class="username-line">
              <text class="username">{{ userInfo.username }}</text>
              <image 
                class="edit-icon" 
                src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/reviseInformation.png"
                @tap="showEditDialog"
              ></image>
            </view>
            <view class="stats">
              <text class="dan" @tap="navigateToLevel">段位：{{ danLevels[userInfo.dan] }}</text>
              <text class="score" @tap="navigateToPointMall">积分：{{ userInfo.score }}</text>
            </view>
          </view>
        </view>

        <!-- 修改信息弹窗 -->
        <uni-popup ref="editPopup" type="dialog">
          <uni-popup-dialog 
            mode="base" 
            title="修改信息"
            :duration="2000"
            :before-close="true"
            @close="closeEditDialog"
            @confirm="submitUserInfo"
          >
            <view class="edit-form">
              <view class="avatar-upload" @tap="chooseAvatar">
                <image class="preview-avatar" :src="tempUserInfo.avatar"></image>
                <text class="upload-text">点击更换头像</text>
              </view>
              <input 
                class="username-input" 
                v-model="tempUserInfo.username" 
                placeholder="请输入用户名"
                maxlength="12"
              />
            </view>
          </uni-popup-dialog>
        </uni-popup>

        <!-- 任务系统 -->
        <view class="task-list">
          <text class="section-title">今日任务</text>
          <view class="task-item" v-for="task in tasks" :key="task.id">
            <view class="task-content">
              <text class="task-name">{{ task.name }}</text>
              <text class="task-reward">+{{ task.reward }}积分</text>
            </view>
            <button 
              class="task-btn"
              :class="{ completed: task.completed }"
              @tap="handleTask(task)"
              :disabled="task.completed"
            >
              {{ task.completed ? '已完成' : '去完成' }}
            </button>
          </view>
        </view>
        <!-- 在task-list区块后添加 -->
        <view class="my-posts-section">
          <text class="section-title">内容管理</text>
          <button 
            class="posts-btn" 
            @tap="navigateToMyPosts"
          >
            <text>查看我的发布</text>
          </button>
        </view>

        <!-- 退出登录 -->
        <button class="logout-btn" @tap="handleLogout">
          <text>退出登录</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
const db = uniCloud.database()
import uniPopup from '/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
import uniPopupDialog from '/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue'

export default {
  components: { uniPopup, uniPopupDialog },
  data() {
    return {
	  lastRefreshDate: uni.getStorageSync('lastRefreshDate') || '', // 新增最后刷新日期
      userInfo: null,
      mobile: '',
      code: '',
      agreed: false,
      codeBtnText: '获取验证码',
      canGetCode: true,
      countdown: 60,
      loading: false,
      danLevels: ['初窥内径的小牛倌', '崭露头角的牛犊力士', '坚毅果敢的斗牛新锐', '技艺精湛的掼牛巧匠', '力挽狂澜的伏牛英雄','霸气外露的牛王悍将','德艺双馨的掼牛宗师','传奇不朽的掼牛圣尊'],
      tasks: [
        { id: 1, name: '每日签到', reward: 20, completed: false },
        { id: 2, name: '文化知识学习', reward: 50, completed: false },
        { id: 3, name: '历史学习', reward: 30, completed: false },
        { id: 4, name: '资讯查看', reward: 30, completed: false }
      ],
      tempUserInfo: {
        avatar: '',
        username: ''
      }
    }
  },
  computed: {
    canLogin() {
      return /^1[3-9]\d{9}$/.test(this.mobile) && 
             this.code.length === 6 && 
             this.agreed
    }
  },
  methods: {
    navigateToAdmin() {
     uni.navigateTo({
       url: '/pages/adminLogin/adminLogin'
     })
    },
    register(){
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
    navigateToMyPosts() {
      uni.navigateTo({
        url: '/pages/myPosts/myPosts'
      })
    },
    navigateToLevel() {
      // 将对象转为 JSON 字符串
      const userInfoStr = encodeURIComponent(JSON.stringify(this.userInfo));
      uni.navigateTo({
        url: `/pages/levelDetail/levelDetail?userInfo=${userInfoStr}`
      });
    },
    navigateToPointMall(){
      const userInfoStr = encodeURIComponent(JSON.stringify(this.userInfo));
      uni.navigateTo({
        url: `/pages/pointsMall/pointsMall?userInfo=${userInfoStr}`
      });
    },
    // 登录相关方法
    validateMobile() {
      this.canGetCode = /^1[3-9]\d{9}$/.test(this.mobile)
    },

    async getSMSCode() {
      if (!this.canGetCode) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return
      }
    
      try {
        const res = await uniCloud.callFunction({
          name: 'send-sms-code',
          data: { mobile: this.mobile }
        })
    
        if (res.result.code === 200) {
          this.startCountdown()
          uni.showToast({ title: '验证码已发送', icon: 'none' })
        } else {
          throw new Error(res.result.msg)
        }
      } catch (e) {
        uni.showToast({ title: e.message, icon: 'none' })
      }
    },

    startCountdown() {
      this.canGetCode = false
      let timer = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(timer)
          this.resetCodeBtn()
          return
        }
        this.codeBtnText = `${this.countdown}s后重发`
        this.countdown--
      }, 1000)
    },

    resetCodeBtn() {
      this.canGetCode = true
      this.countdown = 60
      this.codeBtnText = '获取验证码'
    },

async handleLogin() {
  if (!this.canLogin || this.loading) return;
  
  this.loading = true;
  try {
    const res = await uniCloud.callFunction({
      name: 'user-login',
      data: {
        mobile: this.mobile,
        code: this.code
      }
    });
    
    // 使用switch处理不同状态码
    switch(res.result.code) {
      case 200: // 登录成功
        this.loginSuccess(res.result.data);
        break;
        
      case 4005: // 账号禁用
        this.handleBannedAccount(res.result);
        break;
        
      case 4002: // 验证码错误
      case 4003: // 验证码过期
      case 4004: // 用户不存在
        uni.showToast({
          title: res.result.msg,
          icon: 'none',
          duration: 3000
        });
        break;
        
      default: // 其他错误
        throw new Error(res.result.msg || '登录失败');
    }
  } catch (error) {
    console.error('登录异常:', error);
    uni.showToast({
      title: error.message,
      icon: 'none'
    });
  } finally {
    this.loading = false;
  }
},


handleBannedAccount(result) {
  uni.showToast({
              title:'该用户已被停用',
              icon: 'none',
              duration:3000
            })

  this.code = '';
},

    // 原loginSuccess方法修改为：
    loginSuccess(userData) {
      const userInfo = {
        _id: userData._id,
        username: userData.username,
        mobile: userData.mobile,
        avatar: userData.avatar,
        score: userData.score || 0,
        dan: userData.dan || 0,
        loginCount: (userData.loginCount || 0) + 1,
        lastLogin: this.formatDate(new Date())
      }
      // 更新全局状态
      getApp().globalData.userInfo = userInfo
      // 更新本地存储
      uni.setStorageSync('userInfo', userInfo)
      // 更新当前组件状态
      this.userInfo = userInfo
    },

    // 用户信息修改方法
    showEditDialog() {
      this.tempUserInfo = {
        avatar: this.userInfo.avatar,
        username: this.userInfo.username
      }
      this.$refs.editPopup.open()
    },

    async chooseAvatar() {
      try {
        const res = await uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album']
        })
        
        const file = res.tempFilePaths[0]
        uni.showLoading({ title: '上传中...' })
        const uploadRes = await uniCloud.uploadFile({
          filePath: file,
          cloudPath: `avatars/${Date.now()}_${this.userInfo._id}`
        })
        
        this.tempUserInfo.avatar = uploadRes.fileID
        uni.hideLoading()
      } catch (e) {
        uni.showToast({ title: '头像上传失败', icon: 'none' })
      }
    },

    async submitUserInfo() {
      if (!this.tempUserInfo.username.trim()) {
        uni.showToast({ title: '用户名不能为空', icon: 'none' })
        return
      }

      try {
        const res = await uniCloud.callFunction({
          name: 'user-update',
          data: {
            userId: this.userInfo._id,
            ...this.tempUserInfo
          }
        })

        if (res.result.code === 200) {
          Object.assign(this.userInfo, this.tempUserInfo)
          uni.setStorageSync('userInfo', this.userInfo)
          uni.showToast({ title: '修改成功' })
          this.$refs.editPopup.close()
        }
      } catch (e) {
        uni.showToast({ title: '修改失败', icon: 'none' })
      }
    },

    // 其他功能方法
    toggleAgree(e) {
      this.agreed = !!e.detail.value.length
    },
    
    navToProtocol() {
      uni.navigateTo({ url: '/pages/protocol/protocol' })
    },

    async handleTask(task) {
      if (task.completed) return;
      try {
        const res = await uniCloud.callFunction({
          name: 'complete-task',
          data: {
            userId: this.userInfo._id,
            taskId: task.id,
            taskDate: this.lastRefreshDate // 传递当前任务日期
          }
        });
        
        if (res.result.code === 200) {
          task.completed = true;
          this.userInfo.score += task.reward;
          this.updateDanLevel();
          
          // 持久化存储任务状态
          uni.setStorageSync('dailyTasks', this.tasks);
          uni.setStorageSync('userInfo', this.userInfo);
          
          
		  if(task.id === 2){
			  uni.switchTab({
			  	url:'/pages/explore/explore'
			  })
		  }else if(task.id === 3 ){
        uni.navigateTo({
        	url:'/pages/history/history'
        })
      }else if(task.id === 4 ){
        uni.switchTab({
        	url:'/pages/information/information'
        })
      }
		  uni.showToast({ title: `获得${task.reward}积分`, icon: 'success' });
        }
      } catch (e) {
        uni.showToast({ title: '任务完成失败', icon: 'none' });
      }
    },

    updateDanLevel() {
      const score = this.userInfo.score
      let newDan = 0
      if (score >= 6000) newDan = 7
      else if (score >= 4300) newDan = 6
      else if (score >= 3000) newDan = 5
      else if (score >= 2000) newDan = 4
	  else if (score >= 1200) newDan = 3
	  else if (score >= 600) newDan = 2
	  else if (score >= 200) newDan = 1

      
      if (newDan > this.userInfo.dan) {
        this.userInfo.dan = newDan
        uni.showModal({
          title: '段位提升！',
          content: `恭喜您晋升为${this.danLevels[newDan]}！`,
          showCancel: false
        })
      }
    },

    handleLogout() {
      uni.removeStorageSync('userInfo')
      this.userInfo = null
      uni.showToast({ title: '已退出登录', icon: 'success' })
    },

    formatDate(date) {
      return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-` +
             `${date.getDate().toString().padStart(2,'0')} ` +
             `${date.getHours().toString().padStart(2,'0')}:` +
             `${date.getMinutes().toString().padStart(2,'0')}`
    },

    closeEditDialog() {
      this.$refs.editPopup.close()
    },
	// 检查是否需要刷新任务
	  checkRefreshTasks() {
	    const today = this.formatDate(new Date()).split(' ')[0]
	    if (this.lastRefreshDate !== today) {
	      this.tasks.forEach(task => {
	        task.completed = false;
	      });
	      this.lastRefreshDate = today;
	      uni.setStorageSync('lastRefreshDate', today);
	    }
	  },
	
	  // 修改后的 formatDate 方法
	  formatDate(date) {
	    const year = date.getFullYear();
	    const month = (date.getMonth() + 1).toString().padStart(2, '0');
	    const day = date.getDate().toString().padStart(2, '0');
	    const hours = date.getHours().toString().padStart(2, '0');
	    const minutes = date.getMinutes().toString().padStart(2, '0');
	    return `${year}-${month}-${day} ${hours}:${minutes}`;
	  }
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo') || null;
    if (this.userInfo) {
      this.checkRefreshTasks();
      // 从存储加载任务状态
      const storedTasks = uni.getStorageSync('dailyTasks');
      if (storedTasks) {
        this.tasks = storedTasks;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 基础样式 */
.container {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.cultural-bg {
  width: 100%;
  height: 100%;
  filter: brightness(0.8) sepia(0.2);
}

/* 登录卡片样式 */
.login-card, .user-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  background: rgba(255, 248, 240, 0.95);
  border-radius: 32rpx;
  padding: 80rpx 40rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(139, 69, 19, 0.3);
  
  .horn-decoration {
    position: absolute;
    width: 120rpx;
    height: 180rpx;
    top: -80rpx;
    
    &.right {
      right: -40rpx;
      transform: scaleX(-1);
    }
    
    &:not(.right) {
      left: -40rpx;
    }
  }
}

.content {
  position: relative;
  z-index: 2;
  
  .title {
      font-size: 44rpx !important; /* 确保优先级 */
      color: #8B4513;
      font-weight: bold;
      letter-spacing: 4rpx;
      text-shadow: 2rpx 2rpx 4rpx rgba(255, 228, 196, 0.5);
  }
}

/* 输入框样式 */
.input-group {
  margin-top: 40rpx; /* 增加与标题的间距 */
  margin-bottom: 60rpx;
  
  .input-item {
    position: relative;
    margin-bottom: 40rpx;
    
    .icon {
      position: absolute;
      left: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 40rpx;
      height: 40rpx;
      z-index: 2;
    }
  }
}

.cultural-input {
  height: 100rpx;
  padding: 0 30rpx 0 90rpx;
  background: #FFF;
  border: 2rpx solid #D2B48C;
  border-radius: 50rpx;
  font-size: 32rpx;
  color: #8B4513;
  transition: all 0.3s;
  
  &:focus {
    border-color: #8B4513;
    box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.1);
  }
}

/* 验证码按钮 */
.code-btn {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 12rpx 24rpx;
  background: #8B4513;
  color: #FFE4C4;
  border-radius: 30rpx;
  font-size: 28rpx;
  z-index: 2;
  transition: all 0.3s;
  
  &.disabled {
    background: #D2B48C;
    color: #8B4513;
  }
}

/* 登录按钮 */
.login-btn {
  height: 100rpx;
  line-height: 100rpx;
  background: linear-gradient(45deg, #8B4513, #A0522D);
  color: #FFE4C4;
  font-size: 34rpx;
  border-radius: 50rpx;
  margin-top: 20rpx;
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.5s;
  }
  
  &:active::after {
    left: 100%;
  }
  
  &.disabled {
    background: #D2B48C;
    opacity: 0.8;
  }
}

/* 协议条款 */
.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  
  checkbox {
    transform: scale(0.9);
  }
  
  .agreement-text {
    font-size: 24rpx;
    color: #8B4513;
    margin-left: 10rpx;
  }
  
  .link {
    color: #A0522D;
    text-decoration: underline;
  }
}

/* 用户中心样式 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid #8B4513;
    margin-right: 30rpx;
  }

  .user-meta {
    flex: 1;

    .username-line {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .username {
        font-size: 36rpx;
        color: #8B4513;
        font-weight: bold;
        text-shadow: 1rpx 1rpx 2rpx rgba(255, 228, 196, 0.8);
      }

      .edit-icon {
        width: 40rpx;
        height: 40rpx;
        transition: transform 0.3s;
        
        &:active {
          transform: scale(0.9);
        }
      }
    }

    .stats {
      margin-top: 15rpx;
      text {
        display: block;
        font-size: 28rpx;
        color: #A0522D;
        line-height: 1.5;
      }
    }
  }
}

/* 任务列表 */
.task-list {
  background: rgba(255, 248, 240, 0.9);
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 20rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.1);

  .section-title {
    font-size: 32rpx;
    color: #8B4513;
    font-weight: bold;
    margin-bottom: 30rpx;
    padding-left: 10rpx;
    border-left: 8rpx solid #A0522D;
  }

  .task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx dashed #D2B48C;

    .task-content {
      flex: 1;
      margin-right: 20rpx;

      .task-name {
        font-size: 28rpx;
        color: #8B4513;
      }

      .task-reward {
        font-size: 24rpx;
        color: #A0522D;
      }
    }

    .task-btn {
      height: 60rpx;
      padding: 0 30rpx;
      background: linear-gradient(45deg, #8B4513, #A0522D);
      color: #FFE4C4;
      border-radius: 30rpx;
      font-size: 24rpx;

      &[disabled] {
        background: #D2B48C;
        color: #8B4513;
        opacity: 0.8;
      }

      &.completed {
        background: #EEE8AA;
        color: #8B4513;
      }
    }
  }
}

/* 退出按钮 */
.logout-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: none;
  border: 2rpx solid #8B4513;
  color: #8B4513;
  font-size: 30rpx;
  margin-top: 40rpx;

  &:active {
    background: rgba(139, 69, 19, 0.1);
  }
}

/* 修改信息弹窗样式 */
.edit-form {
  padding: 30rpx;
  
  .avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;
    
    .preview-avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      margin-bottom: 20rpx;
      border: 4rpx solid #8B4513;
    }
    
    .upload-text {
      color: #8B4513;
      font-size: 28rpx;
      text-decoration: underline;
    }
  }

  .username-input {
    height: 80rpx;
    padding: 0 30rpx;
    background: #FFF;
    border: 2rpx solid #D2B48C;
    border-radius: 40rpx;
    color: #8B4513;
    font-size: 32rpx;
    
    &:focus {
      border-color: #8B4513;
    }
  }
}
/* 添加弹窗居中样式 */
::v-deep .uni-popup-dialog {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 80% !important;
  max-width: 600rpx !important;
}

/* 调整弹窗内容边距 */
::v-deep .uni-popup__wrapper {
  padding: 30rpx !important;
}
/* 在样式表中添加 */
.my-posts-section {
  background: rgba(255, 248, 240, 0.9);
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 20rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.1);
}

.posts-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(45deg, #8B4513, #A0522D);
  color: #FFE4C4;
  border-radius: 40rpx;
  font-size: 30rpx;
  margin-top: 20rpx;
  
  &:active {
    opacity: 0.9;
  }
}
.registerText{
  margin-left: 150rpx;
  margin-top: 20rpx;
}
.title-container {
  display: flex;
    justify-content: center; /* 改为居中布局 */
    align-items: center;
    margin-bottom: 60rpx;
    position: relative; /* 添加相对定位 */
}

.admin-icon {
  position: absolute; /* 改为绝对定位 */
  right: -20rpx; /* 从右侧定位 */
  top: 50%;
  transform: translateY(-50%);
  width: 60rpx !important; /* 适当放大尺寸 */
  height: 60rpx !important;
  padding: 15rpx;
  background: rgba(139, 69, 19, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
  z-index: 1; /* 确保在输入框上方 */

  &:active {
    transform: translateY(-50%) scale(0.9);
  }
}
</style>